import './TableLink.scss';
import { defineComponent, ref } from 'vue';
import type { PropType } from 'vue';
import { ElImage } from 'element-plus';

export default defineComponent({
    name: 'TableLink',
    props: {
        row: {
            type: Array as PropType<any>,
            default: () => null
        }
    },
    setup({ row }) {
        const link_default_logo = ref<string>(
            'https://img.static-keyid.cn/toolspace/scrm/2023/09/169571917314116j3b8cou9elt6kw.png'
        );
        const play = (e: any, url: string) => {
            e.stopPropagation();
            window.open(url, '_blank');
        };
        return {
            play,
            link_default_logo
        };
    },
    render() {
        const slotError = <ElImage src={this.link_default_logo} fit="cover" />;
        return (
            <div class={'content-link'}>
                {this.row?.mediaLinkInfo ? (
                    <div class={'link-card'} onClick={e => this.play(e, this.row.mediaLinkInfo.link_url)}>
                        <ElImage
                            class={'link-img'}
                            vSlots={{ error: slotError }}
                            src={this.row.mediaLinkInfo.link_share_image || this.link_default_logo}
                        />
                        <div class={'link-desc'}>{this.row.mediaLinkInfo.link_title}</div>
                    </div>
                ) : (
                    '--'
                )}
            </div>
        );
    }
});
